<template>
  <div class="comment" v-if ="Object.keys(comment).length!==0">  
    <!-- 评论头部 -->
    <div class="comment-head">
      <span class="left">用户评论</span><span class="right">更多<strong>&gt;</strong></span>
    </div>
    <!-- 用户信息 -->
    <div class="user-info">
      <span class="user-logo">
        <img :src="comment.user.avatar" />
      </span>
      <span>{{comment.user.uname}}</span>
    </div>
    <!-- 评论部分 -->
    <div class="comment-info">
      <div class="user-words">{{comment.content}}</div>
    </div>
    <!-- 评论时间和其他 -->
    <div class="other-info">
      <span class="time">{{comment.created|getDate}}</span>
      <span class="style">{{ comment.style }}</span>
    </div>
  </div>

</template>
<script>
import {formate} from '../../../common/utils'
export default {
  name:'DetailCommentInfo',
  props:{
    comment:{
      type:Object,
      default:function(){
        return {};
      }
    }
  },
  filters:{
    getDate(value){
      let date = new Date(value *1000);
      return formate(date,"yyyy/MM/dd hh:mm:ss")
    }
  }
}
</script>
<style scoped>
.comment-head{
  margin:20px auto;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
}
.comment-head .left{
  flex:1;
  padding-left: 10px;

}
.user-logo{
  width: 50px;
  display: inline-block;
  width: 50px;
  vertical-align: middle;
  margin-right: 10px;
}
.user-logo img{
  width: 100%;
  border-radius: 50%;

}

.user-words{
  font-size: 11px;
  color: #999;
  padding: 0 5px;
}
.user-info{
  padding-bottom: 10px;
}
.other-info{
  margin-top:10px;
  display: flex;
  justify-content: space-around;
  font-size: 11px;
  color: #999;
}
.time{
  flex:1;
  padding-left:10px;
}
.style{
  padding-right:10px;
}
</style>